<template>
	<view>
		<u-navbar title="价格详情"></u-navbar>

		<view class="">
			<view class="item" v-for="(item,index) in times" :key="index">
				<view class="text1 u-flex">
					<view class="icon" v-if="item[0].label">
						{{item[0].label}}
					</view>
					{{item[3].t1}}-{{item[3].t2}}
					<view class="dq" v-if="dqtimes==index">
						<view class="text">{{$z.$t("当前")}}</view>
					</view>
				</view>
				<view class="text2">
					<text class="je">{{item[3].je3}}</text>
					{{$z.$t("元/度")}}
				</view>
				<view class="text3" v-if="item[3].je1||item[3].je2">
					{{$z.$t("电费")}}：{{item[3].je1}}{{$z.$t("元/度")}}；{{$z.$t("服务费")}}：{{item[3].je2}}{{$z.$t("元/度")}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import src from "@/static/banner2.png"
	import srcjl from "@/static/jl.png"
	export default {
		data() {
			return {
				src,
				srcjl,
				data: {},
				query: {},
				times: [],
				dqtimes: -1,
			};
		},


		onLoad(query) {
			this.query = query
			this.init()
		},
		methods: {
			async init() {
				let StationCar = await this.$z.request("/StationCar", this.query)
				StationCar = StationCar[0]
				this.data = StationCar

				let query = this.query
				let StationHD = await this.$store.dispatch("request/getRequest", {
					url: "/StationHD",
					data: {
						id: query.id,
					},
				});
				console.log('StationHD', StationHD, query);
				if (StationHD.length == 0 || StationHD[0].type == "1") {
					let df = Number(StationHD[0].df).div(100) || "0"
					let r = [
						[{
								"label": "",
								"value": "jdf"
							},
							{
								"label": this.$z.$t("尖峰服务费"),
								"value": "jfff"
							},
							[
								"jsjsh",
								"jsjsm",
								"jsjeh",
								"jsjem"
							],
							{
								"t1": "00:00",
								"t2": "24:00",
								"je3": df,
								// "je2": 0,
								// "je3": 0
							}
						]
					]
					this.times = r;
					console.log('this.times', this.times);
					this.dqtimes = "0";
					return
				}

				let dfarr1 = [
					[{
							label: this.$z.$t("尖"),
							value: "jdf",
						},
						{
							label: this.$z.$t("尖峰服务费"),
							value: "jfff",
						},
						["jsjsh", "jsjsm", "jsjeh", "jsjem"],
					],
					[{
							label: this.$z.$t("高"),
							value: "fdf",
						},
						{
							label: this.$z.$t("高峰服务费"),
							value: "ffff",
						},
						["fsjsh", "fsjsm", "fsjeh", "fsjem"],
					],
					[{
							label: this.$z.$t("平"),
							value: "pdf",
						},
						{
							label: this.$z.$t("平峰服务费"),
							value: "pfff",
						},
						["psjsh", "psjsm", "psjeh", "psjem"],
					],
					[{
							label: this.$z.$t("谷"),
							value: "gdf",
						},
						{
							label: this.$z.$t("谷峰服务费"),
							value: "gfff",
						},
						["gsjsh", "gsjsm", "gsjeh", "gsjem"],
					],
				];
				let times = [];
				console.log('dfarr1', dfarr1, StationCar);
				dfarr1.forEach((e) => {
					let je1 = StationCar[e[0].value] / 100;
					console.log('je1', je1, [e[0].value]);
					let je2 = StationCar[e[1].value] / 100;
					let je3 = Number(StationCar[e[0].value])
						.add(Number(StationCar[e[1].value]))
						.div(100);

					let dsstr = "";
					for (let i = 1; i <= 5; i++) {
						let t1 = StationCar[`${e[2][0]}${i}`];
						let t2 = StationCar[`${e[2][1]}${i}`];
						let t3 = StationCar[`${e[2][2]}${i}`];
						let t4 = StationCar[`${e[2][3]}${i}`];
						if (!t1) {
							t1 = "0";
						}
						if (!t2) {
							t2 = "0";
						}
						if (!t3) {
							t3 = "0";
						}
						if (!t4) {
							t4 = "0";
						}
						t1 = t1 < 10 ? "0" + t1 : t1;
						t2 = t2 < 10 ? "0" + t2 : t2;
						t3 = t3 < 10 ? "0" + t3 : t3;
						t4 = t4 < 10 ? "0" + t4 : t4;

						if (!(t1 == 0 && t2 == 0 && t3 == 0 && t4 == 0)) {
							dsstr = t1 + ":" + t2 + "--" + t3 + ":" + t4;
							times.push([
								...e,
								{
									t1: `${t1}:${t2}`,
									t2: `${t3}:${t4}`,
									je1,
									je2,
									je3,
								},
							]);
						}
					}
				});
				console.log('times', times);
				let dqt = this.$z.timefn.gettime(0, new Date(), `hh:MM`);
				let dqtimes = times.findIndex((e) => {
					let h = dqt.split(":")[0];
					let M = dqt.split(":")[1];
					let h1 = e[3].t1.split(":")[0];
					let M1 = e[3].t1.split(":")[1];
					let h2 = e[3].t2.split(":")[0];
					let M2 = e[3].t2.split(":")[1];
					// 转数字
					h = Number(h);
					M = Number(M);
					h1 = Number(h1);
					M1 = Number(M1);
					h2 = Number(h2);
					M2 = Number(M2);
					return (
						(h1 < h && h < h2) || (h1 == h && M1 <= M) || (h2 == h && M2 >= M)
					);
				});
				this.times = times;
				console.log('this.times2', this.times);
				this.dqtimes = dqtimes;
			},
			Stationxq() {
				uni.navigateTo({
					url: "/pages/StationCar/dfxq/dfxq"
				})
			}
		}
	};
</script>

<style lang="scss">
	.item {
		padding: 20rpx 30rpx;
		position: relative;
		font-size: 28rpx;

		&::after {
			content: "";
			background-color: #dadbde;
			height: 1px;
			-webkit-transform: scaleY(50%);
			transform: scaleY(50%);
			position: absolute;
			left: 17px;
			right: 0;
			bottom: 0;
		}


		.text1 {
			height: 60rpx;

			.dq {
				position: absolute;
				right: -5px;
				top: -20px;
				width: 0;
				height: 0;
				border-top: 30px solid transparent;
				border-bottom: 30px solid transparent;
				border-right: 30px solid #dca447;
				transform: rotate(135deg);

				.text {
					font-size: 12px;
					color: #fff;
					position: absolute;
					top: -9px;
					right: -30px;
					transform: rotate(269deg);
				}
			}

			.icon {
				background: $uni-color-warning;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				color: #fff;
				font-size: 24rpx;
				margin-right: 12rpx;
			}
		}

		.text2 {
			color: $uni-text-color-grey;
			height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			line-height: 1;

			.je {
				font-weight: bold;
				color: $uni-color-primary;
				font-size: 32rpx;
				padding-right: 8rpx;
			}
		}

		.text3 {
			color: $uni-text-color-grey;
			line-height: 60rpx;
			display: flex;
			align-items: center;
		}
	}
</style>